<template>
  <view class="container">
    <view class="form-item">
      <text class="label">商品标题:</text>
      <input type="text" v-model="form.proName" placeholder="请输入商品名称" maxlength="36" class="input"/>
    </view>
    <view class="form-item">
      <text class="label">商品编号:</text>
      <input type="text" v-model="form.proNumber" placeholder="请输入商品编号" class="input"/>
    </view>
    <view class="form-item">
      <text class="label">商品分类:</text>
      <input type="text" v-model="form.sortId" placeholder="请输入商品类目编号" class="input"/>
    </view>
    <view class="form-item">
      <text class="label">品牌ID:</text>
      <input type="number" v-model="form.brandId" placeholder="请输入品牌ID" class="input"/>
    </view>
    <view class="form-item">
      <view>
        <text class="label">商品状态:</text>
        <uni-data-select
            v-model="value"
            :localdata="range"
            placeholder="请选择商品状态"
            class="input"
        ></uni-data-select>
      </view>
    </view>
    <view class="form-item">
      <uni-section  title="商品图片" type="line" class="example-body">
        <view class="image">
          <uni-file-picker @success="handleFileChange" limit="8" title="最多选择8张图片" ></uni-file-picker>
        </view>
      </uni-section>
    </view>

    <view class="form-item">
      <h3>颜色及规格</h3>
      <view v-for="(color, colorIndex) in colors" :key="colorIndex">
        <input v-model="color.name" type="text" placeholder="请输入颜色" class="input"/>
        <table style="">
          <thead>
          <tr>
            <th style="width: 80px">图片</th>
            <th style="width: 80px">尺寸</th>
            <th style="width: 80px">库存</th>
            <th style="width: 80px">价格(元)</th>
            <th style="width: 100px">状态</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(size, sizeIndex) in color.sizes" :key="sizeIndex">
            <td >
              <view class="file">
                <uni-file-picker limit="1" :del-icon="false" disable-preview :imageStyles="imageStyles"
                                 file-mediatype="image">选择上传</uni-file-picker>
              </view>
            </td>
            <td>
              <input v-model="size.name" type="text" placeholder="尺寸" class="input"/>
            </td>
            <td>
              <input v-model="size.stock" type="number" placeholder="库存" class="input"/>
            </td>
            <td>
              <input v-model="size.price" type="number" placeholder="价格" class="input"/>
            </td>
            <td>
              <input v-model="size.status" type="text" placeholder="1/0" class="input"/>
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <button style="color: blue" @click="addSize(color)">添加款式</button>
            </td>
          </tr>
          </tbody>
        </table>
      </view>
      <button style="color: red" @click="addColor">添加颜色</button>
    </view>

    <view class="form-item">
      <uni-section title="商品详情图" type="line" class="example-body">
        <view class="image">
          <uni-file-picker v-model="form.image" limit="9" title="最多选择9张图片" ></uni-file-picker>
        </view>
      </uni-section>
    </view>

    <view class="form-item">
      <text class="label">商品描述:</text>
      <textarea v-model="form.description" placeholder="请输入商品描述" class="textarea"></textarea>
    </view>

    <view class="form-item">
      <text class="label">备注:</text>
      <textarea v-model="form.remark" placeholder="请输入商品备注信息" class="textarea"></textarea>
    </view>

    <button class="submit-button" @click="submit">提交</button>
    <br/>
    <br/>
    <br/>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '',
      colors:[],
      value: 1,
      //商品状态
      range: [
        { value: 0, text: "下架" },
        { value: 1, text: "上架" },
      ],

      form:{
        img:{},
        //参数名
        name: '',
        //商品标题
        proName:'',
        //商品价格
        proPrice:'',
        //商品描述
        description: '',
        //图片
        image:[],
        //价格
        price: '',
        //商品分类ID
        sortId:'',
        //商品编号
        proNumber:'',
        //品牌ID
        brandId:'',
        //创建时间
        createTime:new Date(),
        //更新时间
        updateTime:'',
        //备注
        remark:'',
      },
      //设置规格上传的边框
      imageStyles: {
        width: 100,
        height: 100,
        border: {
          radius: '5%'
        }
      },
    }
  },
  methods: {
    chooseImage() {
      let tes = this.$refs.uploadInput.click();
      console.info(tes)
    },
    handleFileChange(tempFilePaths){
      console.info(tempFilePaths)
    },
    handleImageChange(e) {
      const file = e.target.files[0];
      const reader = new FileReader();
      reader.onload = (e) => {
        this.imageUrl = e.target.result;
      };
      reader.readAsDataURL(file);
    },
    submit() {
      // 在这里处理商品上传逻辑，可以通过调用接口将商品信息提交到服务器
      console.log(this.form);
      this.handleFileChange()

    },
    addColor() {
      this.colors.push({ name: '', image: '', sizes: [] });
    },
    addSize(color) {
      color.sizes.push({ name: '', stock: '' });
    },
    uploadProduct() {
      const product = {
        name: this.productName,
        price: this.price,
        colors: this.colors,
        image: this.productImage,
      };
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20px;
}

.upload-box {
  width: 200px;
  height: 200px;
  border: 1px dashed #999;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.example-body{
  border: 1px solid #999;
}
.file{
  border:1px dashed #999 ;
}
.upload-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.placeholder-text {
  color: #999;
}

.upload-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.form-item {
  margin-bottom: 20px;
}

.label {
  font-size: 14px;
  color: #333;
}

.input {
  width: 100%;
  height: 40px;
  border: 1px solid #999;
  padding: 0 10px;
  margin-top: 5px;
}

.textarea {
  width: 100%;
  height: 80px;
  border: 1px solid #999;
  padding: 10px;
  margin-top: 5px;
}

.submit-button {
  width: 100%;
  height: 40px;
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
</style>
